﻿@using SmartStore.Admin.Models.DataExchange;
@model ImportProfileModel
@{
	var delete = T("Common.Delete");
	var ignore = @T("Admin.Common.Ignore");
	var selectTargetProperty = T("Admin.DataExchange.Import.SelectTargetProperty");
}

<div>
	<table class="adminContent">
		<tr class="adminSeparator">
			<td>
				<div class="admin-config-group">
					<div class="title">@T("Admin.DataExchange.Import.ColumnMapping")</div>
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<div class="alert alert-info alert-dismissible">
					@Html.Raw(T("Admin.DataExchange.ColumnMapping.Note"))
					<button type="button" class="close" data-dismiss="alert">&times;</button>
				</div>

				@if (Model.ColumnMappings.Any())
				{
					<button id="ResetColumnMappings" type="button" class="btn btn-secondary btn-to-danger" data-url="@Url.Action("ResetColumnMappings", new { id = Model.Id })">
						<i class="fa fa-sync"></i>
						<span>@T("Admin.Common.Clear")</span>
					</button>
				}
			</td>
		</tr>
	</table>
</div>

<div id="PropertyMappingTemplate" class="d-none">
	<div class="mapping-edit form-row">
		<div class="col">
			<select class="form-control select-property noskin">
			@foreach (var property in Model.AvailableEntityProperties)
			{
					<option value="@property.Property" data-defaultdisabled="@(property.IsDefaultDisabled ? "1" : "0")">@property.PropertyDescription</option>
			}
			</select>
		</div>
		<div class="col-auto">
			<button type="button" class="btn btn-warning mapping-apply btn-icon"><i class="fa fa-check"></i></button>
			<button type="button" class="btn btn-outline-secondary btn-to-danger mapping-cancel btn-icon"><i class="fa fa-times"></i></button>
		</div>
	</div>
</div>

<div id="ColumnMappingTemplate" class="d-none">
	<div class="mapping-edit form-row">
		<div class="col">
			<select class="form-control select-column noskin" data-placeholder="@ignore">
				<option></option>
				@foreach (var column in Model.AvailableSourceColumns)
				{
					<option value="@column.Column">@column.PropertyDescription</option>
				}
			</select>
		</div>
		<div class="col-auto">
			<button type="button" class="btn btn-warning mapping-apply btn-icon"><i class="fa fa-check"></i></button>
			<button type="button" class="btn btn-outline-secondary btn-to-danger mapping-cancel btn-icon"><i class="fa fa-times"></i></button>
		</div>
	</div>
</div>

@*Add new field mapping*@ 
<div id="AddMappingTemplate" class="d-none">
	<table>
		<tbody>
			<tr class="column-mapping-new">
				<td>
					<div class="mapping-item mapping-property">
						<input type="hidden" class="input-property" value="" />
						<div class="item-inner d-none">
							<span class="property-icon pr-2">
								<i class="text-success fa fa-fw"></i>
							</span>
							<span class="left-label"></span>
							<span class="muted right-label ml-auto"></span>
						</div>
						<select class="form-control select-property noskin" data-placeholder="@selectTargetProperty">
							<option></option>
							@foreach (var property in Model.AvailableEntityProperties)
							{
								<option value="@property.Property" data-defaultdisabled="@(property.IsDefaultDisabled ? "1" : "0")">@property.PropertyDescription</option>
							}
						</select>
					</div>
				</td>
				<td>
					<div class="mapping-item mapping-column">
						<input type="hidden" class="input-column" value="" />
						<div class="item-inner d-none">
							<span class="left-label"></span>
						</div>
						<select class="form-control select-column noskin" data-placeholder="@ignore">
							<option></option>
							@foreach (var column in Model.AvailableSourceColumns)
							{
								<option value="@column.Column">@column.PropertyDescription</option>
							}
						</select>
					</div>
				</td>
				<td>
					<input type="text" class="form-control input-default" value="" disabled="disabled" />
				</td>
				<td class="omega">
					<button type="button" class="btn btn-block btn-primary mapping-add" disabled="disabled" title="@T("Common.AddNew")">
						<i class="fa fa-plus"></i>
						<span class="mapping-button-label">
							@T("Common.AddNew")
						</span>
					</button>
					<button type="button" class="btn btn-block btn-danger hide mapping-delete" title="@delete">
						<i class="far fa-trash-alt"></i>
						<span class="mapping-button-label">
							@delete
						</span>
					</button>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<div id="ImportColumnMappings" class="adminContent table-responsive mt-3">
	<table class="table table-striped admin-table column-mapping" data-maxindex="@Model.ColumnMappings.Count">
		<thead>
			<tr>
				<th class="column-one">@T("Admin.DataExchange.ColumnMapping.EntityProperty")</th>
				<th class="column-two">@T("Admin.DataExchange.ColumnMapping.ImportField")</th>			
				<th class="column-three">@T("Admin.DataExchange.ColumnMapping.DefaultValue")</th>
				<th class="column-four">&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			@foreach (var mapping in Model.ColumnMappings)
			{
				var index = Model.ColumnMappings.IndexOf(mapping) + 1;
				<tr>
					<td>
						<div class="mapping-item mapping-property">
							<input type="hidden" name="ColumnMapping.Property.@(index)" value="@mapping.Property" />
							<div class="item-inner">
								<span class="property-icon pr-2">
									<i class="text-success fa fa-fw @(mapping.Property.EmptyNull().EndsWith("]") ? "fa-globe" : "fa-unlink")"></i>
								</span>
								@if (mapping.PropertyDescription.Length > Model.MaxMappingLabelTextLength)
								{
									<span class="left-label" title="@mapping.PropertyDescription">@(mapping.PropertyDescription.Substring(0, Model.MaxMappingLabelTextLength))…</span>
								}
								else
								{
									<span class="left-label">@mapping.PropertyDescription</span>
								}
								<span class="muted right-label ml-auto">@mapping.Property</span>
							</div>
						</div>
					</td>
					<td>
						<div class="mapping-item mapping-column">
							<input type="hidden" name="ColumnMapping.Column.@(index)" value="@mapping.Column" />
							<div class="item-inner">
								<span class="left-label">
									@if (mapping.Column.HasValue())
									{
										@mapping.Column
									}
									else
									{
										<span class="muted">@ignore</span>
									}
								</span>
							</div>
						</div>
					</td>
					<td>
						<input type="text" name="ColumnMapping.Default.@(index)" class="form-control input-default" value="@mapping.Default" 
							   @Html.Attr("disabled", "disabled", mapping.IsDefaultDisabled || !mapping.Column.HasValue()) />
					</td>
					<td align="right" class="omega">
						<button type="button" class="btn btn-block btn-danger mapping-delete" title="@delete">
							<span class="mapping-button-label">@delete</span>
						</button>
					</td>
				</tr>
			}
		</tbody>
	</table>
</div>